<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="outer">
        <div class="todo-container">
            <!-- 头部 -->
            <div class="todo-header">
                <input type="text" id="newTodo" placeholder="请输入您的任务，回车确认">
            </div>
            <!-- 内容展示区域 -->
            <ul class="todo-main">
                <!--  <li class="todo-list">
                    <label>
                        <input type="checkbox">
                        <span>抽烟</span>
                    </label>
                    <button class="btn btn-danger">删除</button>
                </li>
                <li class="todo-list">
                    <label>
                        <input type="checkbox">
                        <span>喝酒</span>
                    </label>
                    <button class="btn btn-danger">删除</button>
                </li>
                <li class="todo-list">
                    <label>
                        <input type="checkbox">
                        <span>烫头发</span>
                    </label>
                    <button class="btn btn-danger">删除</button>
                </li> -->
            </ul>
            <!-- 底部区域 -->
            <div class="todo-footer">
                <label>
                    <input type="checkbox" id="checkAll">
                </label>
                <span>
                    已完成 <span id="allComplateTodos">0</span>
                    /全部 <span id="allTodos">0</span>
                </span>
                <button id="removeAllComplate" class="btn btn-danger">清除已完成任务</button>
            </div>
        </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
        // 模拟动态数据来源
        var obj = {
            doThings: [
                { content: '吃' },
                { content: '喝' },
                { content: '玩' },
                { content: '乐' }

            ]
        }
        // 动态渲染
        loadDate();
        function loadDate() {
            $(obj.doThings).each(function (index, item) {
                // $.each(obj.doThings, function (index, item) {
                var str = '\
					<li class="todo-list">\
					    <label>\
					        <input type="checkbox">\
					        <span>'+ item.content + '</span>\
					    </label>\
					    <button class="btn btn-danger">删除</button>\
					</li>\
				';
                $('.todo-main').append(str);
            });
        }

        // (2)移入移出高亮显示
        hoverLi();
        function hoverLi() {
            $('.todo-main').on('mouseenter', 'li', function () {
                $(this).css('background-color', 'rgb(204,204,204)').find('.btn').show();
            }).on('mouseleave', 'li', function () {
                $(this).css('background-color', '').find('.btn').hide();
            })
        }
        // (3)获取全部的li的数据 展示全部的数量
        getAllNum();
        function getAllNum() {
            $('#allTodos').html($('.todo-main li').length);
            console.log($('.todo-main li').length);
            return $('.todo-main li').length;
        }


        // 单选择框与全选择框，文本关系
        single_all();
        function single_all(){
             var allComplateNum = $('.todo-main li label input:checked').length;
               console.log(allComplateNum);
            $('#allComplateTodos').html(allComplateNum);
            if (allComplateNum == getAllNum()) {
                $('#checkAll').prop('checked', true);
            }
             else {
                $('#checkAll').prop('checked', false);
            }
        }
        // (4)单选/全选
        singleClick();
        function singleClick() {
            $('.todo-main').on('click', 'input',single_all);
        }

        //（5） 全选与全不选按钮选择内容
        allSelect();
        function allSelect() {
            $('#checkAll').click(function () {
                console.log(111)
                if (this.checked) {
                    $('.todo-main li label input').prop('checked', true);
                    $('#allComplateTodos').html(getAllNum());
                }
                else {
                    $('.todo-main li label input').prop('checked', false);
                    $('#allComplateTodos').html(0);
                }
            })
        }
        //（6）内容添加
        addition();
        function addition(){
            $('#newTodo').keyup(function(event){
                if(event.keyCode==13){
                    var content=$(this).val().trim();
                    if(content){
                        // 复制最后一个修改内容添加,
                        // 弊端要保证原来里面是有数据，在没有时候无法添加
                        $('li:last').clone(true).appendTo($('ul')).find('span').text(content);
                        $('li:last').hide().slideDown(500);
                        
                        // 更新总数
                         getAllNum();
                        //  清空输入框
                         $('#newTodo').val('');
                        //  全选有新增时候必然非全选状态
                         $('#checkAll').prop('checked', false);
                    }else{
                        alert('请输入要添加内容');
                    }
                }
            })
        }
        // （7）单删
         singleDel();
         function singleDel(){
             $('.todo-main').on('click', '.btn', function () {
                 $(this).parent().slideUp(100,function(){
                 	$(this).remove();
                    getAllNum();
                    console.log(getAllNum())
                    single_all();
                    if (getAllNum() == 0) {
                         $('#checkAll').prop('checked', false);
                    }
                 })
                //  $(this).parent().remove();
                //  更新底部信息
                
            })
         }
        //  删除选中信息
        selectedDel();
        function selectedDel(){
            $('#removeAllComplate').click(function () {
                // 获取到选中的数据之后直接删除
                $('.todo-main li label input:checked').parent().parent().remove();
                // 更新数据数量
                getAllNum();
                single_all();
                if (getAllNum() == 0) {
                    $('#checkAll').prop('checked', false);
                }
            });

        }
    </script>

</body>

</html>